본문

jQuery Events: MouseOver / MouseOut vs. MouseEnter / MouseLeave

By Ben Nadel on January 8, 2010

For years, Javascript developers have had the MouseOver and MouseOut events for triggering events when a user mouses over and out of a given HTML element. For anyone who's tried to use these, you know that they are great, but that they come with a huge problem: the mouseover and mouseout events fire for a given element if the user mouses over or out of an element nested within the given element. To get around this behavior, we've had to resort to all short of shenanigans, including the use of Javascript timers to delay "out"-based actions (assuming an "over" action might subsequently cancel a timer).

jQuery removes this headache by introducing the custom events, MouseEnter and MouseLeave. These custom events build on top of the existing mouseover and mouseout events; they travel up the DOM with each mouseover / mouseout event triggering to see if the user has truly "entered" or "left" the given element. Now these events have been in jQuery for some time; but, I've really start to leverage them a lot lately and, let me say, they make life super easier!

<!DOCTYPE HTML>
<html>
<head>
    <title>MouseOver / MouseOut vs. MouseEnter / MouseLeave</title>
    <style type="text/css">
 
        #outer-mouseover {
            background-color: #F0F0F0 ;
            border: 1px solid #D0D0D0 ;
            float: left ;
            height: 225px ;
            margin-right: 20px ;
            position: relative ;
            width: 225px ;
            }
 
        #outer-mouseenter {
            background-color: #F0F0F0 ;
            border: 1px solid #D0D0D0 ;
            float: left ;
            height: 225px ;
            position: relative ;
            width: 225px ;
            }
 
        span.inner {
            background-color: #B3C9DF ;
            border: 1px solid #6492BF ;
            color: #FFFFFF ;
            height: 100px ;
            left: 62px ;
            line-height: 98px ;
            position: absolute ;
            text-align: center ;
            top: 62px ;
            width: 100px ;
            }
 
    </style>
    <script type="text/javascript" src="jquery-1.4a2.js"></script>
    <script type="text/javascript">
 
        // When the DOM is ready, init scripts.
        jQuery(function( $ ){
 
            // Bind the mouse over /out to the first DIV.
            $( "#outer-mouseover" ).bind(
                "mouseover mouseout",
                function( event ){
                    console.log( event.type, " :: ", this.id );
                }
            );
 
            // Bind the mouse enter to the second DIV.
            $( "#outer-mouseenter" ).bind(
                "mouseenter mouseleave",
                function( event ){
                    console.log( event.type, " :: ", this.id );
                }
            );
 
        });
 
    </script>
</head>
<body>
 
    <h1>
        MouseOver / MouseOut vs. MouseEnter / MouseLeave
    </h1>
 
    <div id="outer-mouseover">
        <span class="inner">MouseOver</span>
    </div>
 
    <div id="outer-mouseenter">
        <span class="inner">MouseEnter</span>
    </div>
 
</body>
</html>
view rawcode-1.htm hosted with ❤ by GitHub

If you watch the video above, you'll see that the mouseenter and mouseleave events stay more in alignment with the "intent" of the code, rather than the technical underpinnings.

jQuery takes these custom events and makes them even easier to use by wrapping them up in the convenience method, hover(). The hover() method takes two Function arguments and binds the first one as your mouseenter event handler and the second one as your mouseleave event handler:

<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Hover Method</title>
    <style type="text/css">
 
        #outer-hover {
            background-color: #F0F0F0 ;
            border: 1px solid #D0D0D0 ;
            height: 225px ;
            margin-right: 20px ;
            position: relative ;
            width: 225px ;
            }
 
        span.inner {
            background-color: #B3C9DF ;
            border: 1px solid #6492BF ;
            color: #FFFFFF ;
            height: 100px ;
            left: 62px ;
            line-height: 98px ;
            position: absolute ;
            text-align: center ;
            top: 62px ;
            width: 100px ;
            }
 
    </style>
    <script type="text/javascript" src="jquery-1.4a2.js"></script>
    <script type="text/javascript">
 
        // When the DOM is ready, init scripts.
        jQuery(function( $ ){
 
            // Bind the mouse enter and mouse leave events using
            // the convenience method, hover().
            $( "#outer-hover" ).hover(
                function(){
                    console.log( "mouseEnter" );
                },
                function(){
                    console.log( "mouseLeave" );
                }
            );
 
        });
 
    </script>
</head>
<body>
 
    <h1>
        jQuery Hover Method
    </h1>
 
    <div id="outer-hover">
        <span class="inner">Hover</span>
    </div>

댓글목록

등록된 댓글이 없습니다.

인기검색어

본문

jQuery Events: MouseOver / MouseOut vs. MouseEnter / MouseLeave

관련링크

댓글목록

Search